<template>
  <div>
    <Row>
      <Row class="list_row" style="margin-top: 0px;min-height: 400px;">

        <Table :columns="roleId =='1' ? adminCoachColumn:coachColumn" border :data="dataList" stripe :no-data-text="noDataMsg">
          <template slot-scope="{ row, index }" slot="seq">
            {{ (currentPage - 1) * pageSize + index + 1 }}
          </template>
          <template slot-scope="{ row, index }" slot="status">
            <Icon v-if="row.status == 0" custom="iconfont icon-device" size="24" color="#aaaaaa" />
            <Icon v-else custom="iconfont icon-device" size="24" color="#2d8cf0" />
          </template>
        </Table>
        <div class="div_page">
        <Page :total="totalCount" :current="currentPage" :page-size="pageSize"
              show-total show-elevator prev-text="<" next-text=">" @on-change="pageChg"/>
      </div>
      </Row>
    </Row>

  </div>
</template>
<script>
import applyApi from '@/api/applyApi'
import { isEmpty } from '@/libs/util'
import { mapGetters } from "vuex";
export default {
  data () {
    return {
      currentPage: 1,
      totalCount: null,
      pageSize: 10,
      roleId: "",
      dataList: [],
      noDataMsg:'',
      adminCoachColumn:[
      {
        title: this.$t('common.seq'), 
          slot: "seq",
          width: '110',
          render: (h, params) => {
            return h('span', {
              class: 'sortBlock'
            }, params.index + 1)
          }
        },
        { 
          title: this.$t('common.sendUser'), 
          key: 'from'
        },
        {
          title: this.$t('common.receiver'), 
          key: 'to'
        },
        {
          title: this.$t('common.msgContent'), 
          key: 'msgContent'
        },
        {
          title:this.$t('common.createTime'),
          key: 'createTime'
        },
      ],
      coachColumn: [
        {
          title: this.$t('common.seq'), 
          slot: "seq",
          width: '110',
          render: (h, params) => {
            return h('span', {
              class: 'sortBlock'
            }, params.index + 1)
          }
        },
        {
          title: this.$t('common.msgContent'), 
          key: 'msgContent'
        },
        {
          title:this.$t('common.createTime'),
          key: 'createTime'
        },
        {
          title:this.$t('common.optColumn'),
          key: 'action',
          render: (h, params) => {
            return h('div', [

              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                class: 'btnGreen mr pr',
                on: {
                  click: () => {
                    this.dopost(1, params.row)
                  }
                }
              }, this.$t('common.agreeBtn')),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '15px'
                },
                class: 'btnYellow',
                on: {
                  click: () => {
                    this.dopost(2, params.row)
                  }
                }
              }, this.$t('common.rejectBtn'))
            ])
          }
        }]
    }
  },
  watch: {

  },
  created () {
    this.roleId = this.getRoleId();
    this.fetchDataList()
  },
  methods: {
    ...mapGetters(["getRoleId"]),
    pageChg (selPage) {
      this.currentPage = selPage
      this.fetchDataList()
    },
    fetchDataList () {
      this.noDataMsg =  this.$t('common.loading')
      this.dataList = []
      var param = { pageSize: this.pageSize, currentPage: this.currentPage }
      
      applyApi.message(param).then(res => {
        this.noDataMsg = this.$t('common.noData')
        
        this.dataList = res.data.data.list.items
        
        this.totalCount = res.data.data.list.totalCount
      }, error => {
        this.$Message.error(error.response.data.msg)
      })
    },

    dopost (type, row) {
      // 1同意
      this.$Modal.confirm({
        title: type === 1 ? this.$t('common.agreePromt') :  this.$t('common.rejectPromot') ,
        content: this.$t('common.agreeBtn')+`<span style="color:red" > ${type === 1 ? this.$t('common.agreeBtn') : this.$t('common.rejectBtn')}</span>:${row.msgContent}`,
        okText: type === 1 ? this.$t('common.agreeBtn') : this.$t('common.rejectBtn'),
        cancelText: this.$t('cancel'),
        onOk: () => {
          const doApply = type === 1 ? applyApi.agreeApplyNoRelationTrainCenter(row.id) : applyApi.refuseApplyNoRelationTrainCenter(row.id)
          doApply.then(res => {
            if (res.data.code === 200) {
              this.$Message.success(this.$t('common.optSuc'))

              window.location.reload()
            }
          })
        }
      })
    }

  }
}
</script>
